<template>
  <el-main class="main-block">
    <div class="cont">
      <i class="pic-404__parent" />
      <div class="name">
        <p>{{ realName }}，{{ dayTime }}好！</p>
        <span>用户名：{{ name }}</span>
      </div>
      <div class="log-info">
        <p>上次登录时间：{{ lastLoginTime | timeFormat }}</p>
        <p>{{ dateMsg }}</p>
      </div>
    </div>
    <canvas />
    <em style="display:none;">{{ name }}</em>
  </el-main>
</template>

<script type="text/javascript">

import { mapGetters } from 'vuex'
// import * as THREE from 'three'
// import Projects from './Projects'
// import CanvasRenderer from './CanvasRenderer'
// import CUThree from './CUThree'
import { parseTime } from '@/utils/index'
import { UserModule } from '@/store/modules/user'

export default {
  name: 'SKBanner',
  components: {},
  computed: {
    // key() {
    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    // }
    // ...mapGetters([
    //   'name',
    //   'realName',
    //   'lastLoginTime'
    // ])
  },
  filters: {
    timeFormat(val) {
      return parseTime(val)
    }
  },
  data() {
    const seizeTheDay = new Date().getHours()
    return {
        name: '',
        realName: 'aaa',
        lastLoginTime: Date(),
      imgUrl: 'https://static.afufintech.com/images/index-img.png',
      userName: '张三',
      // _lastLoginTime: parseTime(lastLoginTime),
      // strName: realName,
      dayTime: seizeTheDay > 4 && seizeTheDay < 13 ? '早上' : seizeTheDay > 12 && seizeTheDay < 15 ? '中午' : seizeTheDay > 14 && seizeTheDay < 18 ? '下午' : '晚上',
      dateMsg: `今天是${new Date().toLocaleDateString().replace(/(\d)\/(\d{0,2})\/(\d{0,2})/img, '$1年$2月$3日')}，${new Date().toLocaleDateString('zh-CN', { weekday: 'long' })}`
    }
  },
  created() {
  },
  mounted() {
    this.render3D()
    // Projects(THREE)
    // CanvasRenderer(THREE)
  },
  methods: {
    render3D() {
      // CUThree()
      console.warn('to be continued')
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "src/styles/mixin.scss";
	.app-wrapper {
	  @include clearfix;
	  position: relative;
	  height: 100%;
	  width: 100%;
	  .main-block{
	  	.pic-404__parent{
	  		width: 60px;
	  		height: 60px;
	  		display: inline-block;
	  		margin: 20px 0 -10px 0;
  			background-image: url(../../../assets/icons/index-img.png);
	  	}
	  	// background: #01011B 100%;
  		// background: rgba(1, 1, 27, .2);
	  	height: 360px;
	  	text-align: center;
	  	color: white;
	  	font-family: 'Microsoft YaHei';
	  	overflow: hidden;
	  	position: relative;
	  	margin-left: -33px;
	  	.cont{
	  		// display: inline-block;
	  		position: absolute;
	  		top:99px;
	  		left: 0;
	  		img{
	  			vertical-align: bottom;
	  			display: inline-block;
	  			margin-top: 12px;
	  			width: 60px;
			    border-radius: 50%;
			    height: 60px;
	  		}
	  		.name, .log-info{
	  			/* vertical-align: top;
	  			text-align: left;
	  			display: inline-block;
	  			margin-left: 30px; */
	  			vertical-align: top;
			    text-align: left;
			    display: inline-block;
			    margin-left: 25px;
			    margin-top: -20px;
			    font-weight: bolder;
	  			p{
	  				font-size: 22px;
	  				font-weight: bold;
	  				margin-bottom: 5px;
	  			}
	  			span{
	  				font-size: 16px;
	  			}
	  		}
	  		.log-info{
	  			/* display: block;
	  			margin-top: 50px;
	  			margin-left: -15px;
	  			text-align: center; */
			    // margin-left: 80px;
	  			// display: block;
    			// 	padding: 0 0 0 105px;
			    //  text-align: left;
			    text-align: left;
			    position: absolute;
			    white-space: nowrap;
			    left: 54px;
	  			p{
 	  				font-size: 12px;
 	  				margin:10px;
	  			}
	  		}
	  	}
	  }
	}
</style>
